Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

160
Views
How do I access the class using "this" inside an each function of the class in jQuery?

Suppose I have a class and an each method like the following:

var dog {
    breed: "huskey",
     
    function printBreed(){
      $("ul li").each(function() {
            $(this).html() = dog.breed;
        });
    }
}

I made each of the list item of the page display "huskey". However, inside the each function, I can't use $(this).html() = this.breed;. Because, this will refer to the list item "li" itself. Besides, calling the object by its name. Is there a generic way to refer to the object like "this".

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

First, let’s refer to a corrected version of your code:

const dog = { // Use `const` instead of `var`; `=` was missing.
  breed: "Husky", // Spelling.
  printBreed(){ // `function` is invalid here, so use a method instead.
    $("ul li").each(function(){
      $(this).html(dog.breed); // Assignment to a method call is invalid; `html` accepts an argument to set the value.
    })
  }
};

The callback function of jQuery’s each is called with this bound to the currently iterated element. Obviously, this cannot refer to both your element and your dog object at the same time.

The each callback receives two arguments: the current index, and the currently iterated element. In order to ignore the this binding from jQuery, simply use an arrow function instead of a function function. this will then be taken from lexical scope. See How does the “this” keyword work? and How to access the correct this inside a callback for more details.

The working code with jQuery would look like this:

const dog = {
  breed: "Husky",
  printBreed(){
    $("ul li").each((index, element) => $(element).html(dog.breed));
  }
};

dog.printBreed();

Note that an each loop isn’t necessary in your case. You could’ve simply written the code like so:

const dog = {
  breed: "Husky",
  printBreed(){
    $("ul li").html(this.breed);
  }
};

dog.printBreed();

Even better: use .text instead of .html. Setting HTML for plain text is overkill.

Even if the breed was different for each <li>, .html accepts a function callback. But, you know, use arrow functions as appropriate.


Of course, You Don’t Need jQuery, so a vanilla version looks like this:

const dog = {
  breed: "Husky",
  printBreed(){
    document.querySelectorAll("ul li").forEach((element) => element.textContent = this.breed);
  }
}

dog.printBreed();
about 4 years ago · Juan Pablo Isaza Report

0

You can store a reference:

var dog {
    breed: "huskey",
     
    function printBreed(){
      var self = this;
      $("ul li").each(function() {
            $(this).html() = self.breed;
        });
    }
}
about 4 years ago · Juan Pablo Isaza Report

0

This question has been on my mind too, I resolved to doing

var dog {
    breed: "huskey",
     
    function printBreed(){
        classThis  = this
      $("ul li").each(function() {
            $(this).html() = classThis.breed;
        });
    }
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!